<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<script type="text/javascript" src="./lib/cuon-matrix.js"></script>
<script type="text/javascript" src="./lib/cuon-utils.js"></script>
<script type="text/javascript" src="./lib/webgl-debug.js"></script>
<script type="text/javascript" src="./lib/webgl-utils.js"></script>
<script type="text/javascript">
	var Geometry1 = new Object();
	Geometry1.vertices = new Float32Array([
    // Vertex coordinates and color(RGBA)



     0.5,  0.4,  -0.6,  1.0,  0.4,  0.4, // The back yellow one
    -0.5,  0.4,  -0.6,  1.0,  1.0,  0.4,
     0.0, -0.6,  -0.6,  1.0,  1.0,  0.4, 


     0.0,  0.2,   -0.2,  0.4,  0.4,  1.0,  // The front blue one 
    -0.2, -0.2,  -0.2,  0.4,  0.4,  1.0,
     0.2, -0.2, -0.2,  1.0,  0.4,  0.4, 


 
      0.0,  0.5,  -0.4,  0.4,  1.0,  0.4, // The middle green one
     -0.5, -0.5,  -0.4,  0.4,  1.0,  0.4,
      0.5, -0.5,  -0.4,  1.0,  0.4,  0.4, 

  	
      ]);

	Geometry1.VSHADER_SOURCE =
	'attribute vec4 a_Position;'+
	'attribute vec4 a_Color;'+
	'varying vec4 v_Color;'+
	'uniform mat4 u_mat;'+
	'void main(){'+
 	'gl_Position = u_mat * a_Position;'+
 	//'gl_Position =  a_Position;'+
	'v_Color = a_Color;'+
	'}';

	Geometry1.FSHADER_SOURCE =
	'precision mediump float;'+
	'varying vec4 v_Color;'+
	'void main(){'+
	'gl_FragColor = v_Color; '+
	'}';

	 Geometry1.initVertexBuffers = function(gl){
		this.vertexBuffer = gl.createBuffer();
		if(!this.vertexBuffer){
			alert('createBuffer gvertexBuffer fail');
			return false;
		}
		return true
	}


    Geometry1.initShader = function(gl){
    	this.program = createProgram(gl,this.VSHADER_SOURCE,this.FSHADER_SOURCE);
		if(!this.program){
			alert('Geometry1 createProgram fail')
			return;
		}
		gl.useProgram(this.program);
    	this.a_mat = gl.getUniformLocation(this.program,'u_mat');	
		if (!this.a_mat) {
			alert('uniform Geometry1.u_mat fail');
			return false;
		}
    	this.a_Position = gl.getAttribLocation(this.program,'a_Position');
		if(this.a_Position <0){
			alert('a_PointSize fail')
			return false;
		}
		
		this.a_Color = gl.getAttribLocation(this.program,'a_Color');
		if(this.a_Color <0){
			alert('a_Color fail');
			return false;
		}
		return true;
    }

  

	Geometry1.mat = new Matrix4();

	Geometry1.verticestest = new Float32Array([
     0.5,  0.4,  -1.0, 1.0,


     0.0,  0.2,   -0.2, 1.0,

 
      0.0,  0.5,  -0.4, 1.0,
  	
      ]);
	Geometry1.draw = function(gl,frames){
		gl.bindBuffer(gl.ARRAY_BUFFER,this.vertexBuffer);
		gl.bufferData(gl.ARRAY_BUFFER,this.vertices,gl.STATIC_DRAW);

		gl.enableVertexAttribArray(this.a_Position);
		gl.enableVertexAttribArray(this.a_Color);
		
		var Fsize = this.vertices.BYTES_PER_ELEMENT;
		gl.vertexAttribPointer(this.a_Position,3,gl.FLOAT,false,Fsize*6,0);
		gl.vertexAttribPointer(this.a_Color,3,gl.FLOAT,false,Fsize*6,Fsize*3);

		//this.mat.setLookAt(0,0,-1,0,0,0,0,1,0);
		//this.mat.rotate(-10,0,0,1);
		this.mat.setPerspective(30, 1,0.01, 50);

		var mat4 = new Matrix4();
		mat4.setPerspective(30, 1,0.01, 50);


		var ve1 = new Vector4([0.5,  0.4,  -10.0, 1.0]);
	    var ve2 = new Vector4([0.5,  0.4,  -4.4, 1.0]);
		var ve3 = new Vector4([0.5,  0.4,  -2.2, 1.0]);
	    console.log(mat4.multiplyVector4(ve1).elements)
	    console.log(mat4.multiplyVector4(ve2).elements)
	    console.log(mat4.multiplyVector4(ve3).elements)

		console.log(this.mat.elements)
		//this.mat.lookAt(0,0,4,0,0,1,0,1,0);

		gl.uniformMatrix4fv(this.a_mat,false,this.mat.elements);
		
		gl.drawArrays(gl.TRIANGLES,0,Geometry1.vertices.length /6);

		gl.bindBuffer(gl.ARRAY_BUFFER,null);
	}


	function start () {
		var canvas = document.getElementById("webgl");
		var gl = getWebGLContext(canvas);
		if (!gl){
			alert('gl fail');
			return;
		}

		if(!Geometry1.initShader(gl)){
			alert('Geometry1 initShaderParm fail')
			return;
		}

		if (!Geometry1.initVertexBuffers(gl)){
			alert('Geometry1 initVertexBuffers fail');
			return;
		}

		var frames = 0
		function renderer(){
			frames++;
			render(gl,frames);
			//requestAnimationFrame(renderer)
		}
		renderer();
	}

	function render(gl,frames){
		gl.clearColor(0,0,0,1);
		gl.enable(gl.DEPTH_TEST);
		gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
	
		//gl.clear(gl.COLOR_BUFFER_BIT);
		Geometry1.draw(gl,frames);		
	}



</script>
<body onload="start()">
<canvas id="webgl" width="500" height="500"></canvas>
</body>
</html>